<template>
	<div class="member-order-page">
		<Teleport to="#dailog">
			<OrderCancel ref="orderCancelCom" />
		</Teleport>
		<Teleport to="#dailog">
			<OrderLogistics ref="logisticsOrderCom" />
		</Teleport>

		<XtxTabs v-model="activeName" @tab-click="tabClick">
			<XtxTabsPanel v-for="item in orderStatus" :key="item.name" :label="item.label" :name="item.name">
			</XtxTabsPanel>
		</XtxTabs>

		<div class="order-list">
			<div v-if="loading" class="loading"></div>
			<div class="none" v-if="!loading && orderList.length === 0">
				<p>暂无数据</p>
				<p>修改发货状态（改订单编号）：http://pcapi-xiaotuxian-front-devtest.itheima.net//member/order/consignment/1394116427400613890
				</p>
			</div>

			<OrderItem @on-logistics="onLogisticsOrder(item)" @on-confirm-order="onConfirmOrder(item)"
				@on-delete="onDeleteOrder" @on-cancel-order="onCancelOrder(item)" v-for="item in orderList"
				:key="item.id" :order="item">
			</OrderItem>
		</div>

		<XtxPagination v-if="total > requestParams.pageSize" @current-change="requestParams.page=$event" :total="total"
			:page-size="requestParams.pageSize" :current-page="requestParams.page" />
	</div>
</template>

<script>
	import {
		ref,
		reactive,
		watch
	} from 'vue'
	import {
		orderStatus
	} from '@/api/constants'
	import {
		findOrderList,
		delteOrder,
		confirmOrder
	} from '@/api/order'
	import OrderItem from './components/order-item'
	import OrderLogistics from './components/order-logistics'
	import OrderCancel from './components/order-cancel'
	import Confirm from '@/components/library/Confirm'
	import Message from '@/components/library/Message'

	export default {
		components: {
			OrderItem,
			OrderCancel,
			OrderLogistics
		},

		setup() {
			const activeName = ref('all')

			const tabClick = tab => {
				requestParams.orderState = tab.index
				requestParams.page = 1
			}

			const requestParams = reactive({
				page: 1,
				pageSize: 5,
				orderState: 0
			})
			const orderList = ref([])
			const total = ref(0)
			const loading = ref(true)

			const findOrderListFn = () => {
				loading.value = true
				findOrderList(requestParams).then(data => {
					orderList.value = data.result.items
					total.value = data.result.counts
					loading.value = false
				})
			}

			watch(requestParams, () => {
				findOrderListFn()
			}, {
				immediate: true
			})

			const onDeleteOrder = item => {
				Confirm({
					text: '您确认删除该条订单吗？'
				}).then(() => {
					delteOrder([item.id]).then(() => {
						Message({
							text: '删除订单成功',
							type: 'success'
						})
						findOrderListFn()
					})
				}).catch(e => {})
			}

			return {
				activeName,
				orderStatus,
				tabClick,
				orderList,
				loading,
				total,
				requestParams,
				onDeleteOrder,
				...useCancelOrder(),
				...useConfirmOrder(),
				...useLogisticsOrder()
			}
		}
	}

	export const useLogisticsOrder = () => {
		const logisticsOrderCom = ref(null)
		const onLogisticsOrder = (item) => {
			logisticsOrderCom.value.open(item)
		}
		return {
			onLogisticsOrder,
			logisticsOrderCom
		}
	}

	export const useConfirmOrder = () => {
		const onConfirmOrder = item => {
			Confirm({
				text: '您确认收到货吗？确认后货款将会打给卖家。'
			}).then(() => {
				confirmOrder(item.id).then(() => {
					Message({
						text: '确认收货成功',
						type: 'success'
					})
					item.orderState = 4
				})
			})
		}

		return {
			onConfirmOrder
		}
	}
	
	export const useCancelOrder = () => {
		const orderCancelCom = ref(null)
		const onCancelOrder = (item) => {
			orderCancelCom.value.open(item)
		}
		return {
			onCancelOrder,
			orderCancelCom
		}
	}
</script>

<style scoped lang="less">
	.member-order {
		height: 100%;
		background: #fff;
	}

	.order-list {
		background: #fff;
		padding: 20px;
		position: relative;
		min-height: 400px;
	}

	.loading {
		height: 100%;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(255, 255, 255, .9) url(@/assets/images/loading.gif) no-repeat center;
	}

	.none {
		height: 400px;
		line-height: 200px;

		p {
			text-align: center;
			color: #999;
		}
	}
</style>
